<template>

<div class="layout">
  <div class="left">
    <div class="top-panel">
      <div class="avatar"></div>
      <div class="top-menus">
          <div :class="['menu-item',item.codes.includes(route.meta.code)?'active':'']" v-for="item in leftTopMenus" @click="jumpMenu(item)" :key="item.name">
              <el-badge :value="item.messageCount" :max="99" :hidden="item.messageCount === 0" :offset="[-5,0]">
                <div :class="['iconfont','icon-'+item.icon]"></div>
                <div  class="name">{{ item.name }}</div>
              </el-badge>
          </div>
      </div>
    </div>
    <div class="bottom-menus">
            <template v-for="item in leftBottomMenus" :key="item.name">
                  <div :class="['menu-item',item.codes.includes(route.meta.code)?'active':'']" v-if="!item.onlyAdmin || (item.onlyAdmin && userInfoStore.userInfo.isAdmin==1)" @click="jumpMenu(item)">
                     <div :class="['iconfont','icon-'+item.icon]"></div>
                  </div>
            </template>
    </div>
  </div>
  <div class="right">
      <router-view></router-view>
  </div>
</div>
</template>

<script setup>
import { ref, reactive, getCurrentInstance,nextTick} from 'vue'
import { useRouter, useRoute } from 'vue-router'
import {useUserInfoStore} from '@/store/UserInfoStore'
import { el } from 'element-plus/es/locales.mjs'
const { proxy } = getCurrentInstance()
const router = useRouter()
const route = useRoute()
const userInfoStore = useUserInfoStore()

const leftTopMenus = ref([
   {
    name: '会议',
    icon: 'video',
    path: '/meetingMain',
    codes:['meeting'],
    messageCount: 0
   },
   {
    name: '通讯录',
    icon: 'contact',
    path: '/contact',
    codes:['contact'],
    messageCount: 0
   },
   {
    name: '录制',
    icon: 'record',
    path: '/screencap',
    codes:['screencap'],
    messageCount: 0
   },
])


const leftBottomMenus = ref([
   {
    icon: 'settings',
    path: '/setting',
    codes:['setting'],
    onlyAdmin: false
   },

   {
    icon: 'admin',
    btnType: 'admin',
    codes:[],
    onlyAdmin: true
   },
])


const jumpMenu =(menu)=>{
   if(menu.btnType === "admin"){
      return;
   }

   router.push(menu.path);
}



</script>

<style lang="scss" scoped>

.layout{
   display: flex;
   .left{
      width: 64px;
      background: #f3f3f4;
      margin: 0px auto;
      display: flex;
      align-items: center;
      flex-direction: column;
      justify-content: space-between;
      -webkit-app-region: drag;
      .top-panel{
           text-align: center;
           .avatar{
            display: flex;
            justify-content: center;
            -webkit-app-region: no-drag;
            margin: 40px 0px 20px 0px;
           }
      }

      .bottom-menus{
        margin-bottom: 13px;
      }


      .menu-item{
         text-align: center;
         -webkit-app-region: no-drag;
         cursor: pointer;
         margin-bottom: 20px;
         color: #4c5263;
         .iconfont{
          font-size: 20px;
         }

         .name{
          margin-top: 5px;
          font-size: 12px;
         }
         &:hover{
          color:#353535
         }
         &:last-child{
          margin-bottom: 0px;
         }
      }

      .active{
         .iconfont{
          color: var(--blue)
         }
         .name{
          color: var(--blue)
         }
      }

   }

   .right{
       flex: 1;
       widows: 0;
       height: calc(100vh);
   }


}





</style>
